<!--
  * 名称: DeviceSelect
  * @param deviceType String required
  * @param size String 'large'|'medium'|'small'
  * 使用方式：
  * 在 template 中使用 <device-select></device-select>
-->
<template>
  <el-select
    v-model="bitrateProfile"
    placeholder="placeholder"
    class="select"
    :teleported="false"
  >
    <el-option
      v-for="(item, index) in bitrateProfileList"
      :key="index"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import TUIRoomCore from '../../tui-room-core';
import { Emitter } from 'mitt';

interface Props {
  mitt: Emitter<any>,
}
const props = defineProps<Props>();
const bitrateProfile = ref('300');

const bitrateProfileList = [
  { label: '200kbps', value: '200' },
  { label: '300kbps', value: '300' },
  // { label: '800kbps', value: '800' },
  // { label: '900kbps', value: '900' },
  // { label: '1500kbps', value: '1500' },
  // { label: '2000kbps', value: '2000' }
];

const bitrateProfileMap: Record<string, any> = {
  200: { videoBitrate: 200 },
  300: { videoBitrate: 300 },
  // 800: { videoBitrate: 800 },
  // 900: { videoBitrate: 900 },
  // 1500: { videoBitrate: 1500 },
  // 2000: { videoBitrate: 2000 },
};

watch(bitrateProfile, (val: string) => {
  const currentVideoProfileObj = bitrateProfileMap[val];
  TUIRoomCore.setVideoEncoderParam(currentVideoProfileObj);
});

props.mitt.on('bitrateChange', (value) => {
  bitrateProfile.value = `${value}`;
});

</script>

<style lang="scss" scoped>
.select {
  width: 280px;
  height: 32px;
  font-size: 14px;
}
</style>
